iT邦幫忙

2021 iThome 鐵人賽

DAY 11
3
Software Development

全端工程師生存筆記系列 第 11

[面試][前端]如何判斷專案要使用 CSR 還是 SSR?

  • 分享至 

  • xImage
  •  

如果前輩說什麼你就做什麼,長久下來你會失去判斷能力。

除非你是草創成員,不然進入一間公司後,往往都是跟著前輩訂下的規則走;大部分的前輩在交接的時候只會說要這樣做,而不會告訴你為什麼要這樣做

不懂就問,不會就學;前輩說的也未必都是正確的,過去的設計可能存在缺陷,只是當時沒有發現;也可能因為時空背景關係,現在已經不適用了;希望大家永遠保留自己的意識,與面對未知的懷疑

大綱

  1. 如何判斷專案要使用 CSR 還是 SSR?

    • 1.1 面試官為什麼會問?
    • 1.2 面試官想從答案確認什麼?
    • 1.3 筆者提供的簡答
  2. 回答問題所需具備的知識

    • 2.1 CSR - Client-Side Rendering(客戶端渲染)
    • 2.2 SSR - Server-Side Rendering(伺服器端渲染)
  3. 衍伸問題

    • 3.1 在實務上有遇過什麼問題?你如何解決?

1. 如何判斷專案要使用 CSR 還是 SSR?

1.1 面試官為什麼會問?

因為履歷資訊中顯示求職者使用Nuxt.js這個 Vue.js 的應用框架;而選擇這個框架通常是為了 SSR,於是想透過這個問題確認求職者是否明白 SSR 與 CSR 的意思,以及各自的應用場景。


1.2 面試官想從答案確認什麼?

  • 是否可以簡述 CSR 與 SSR 的應用場景
  • 細問時可以說出各自的優缺點
  • 在實務上如何發揮各自優點

1.3 筆者提供的簡答

如果是操作頻繁的的內部管理系統,我會建議使用 CSR,由 Client 負責編譯 HTML 頁面以降低 Server 端壓力;而面對需要 SEO 優化的網站,我會推薦用 SSR,因為 Client 端會直接收到由 Server 端編譯好的 HTML,利用首屏渲染快的優勢提供較好的使用者體驗。


2. 回答問題所需具備的知識

2.1 CSR - Client-Side Rendering(客戶端渲染)

渲染過程全部交給 Client 端的瀏覽器去處理,Server 端不參與任何渲染。一開始的 HTML 是空白的,需要等待 JavaScript 下載並執行後瀏覽器才會顯示畫面。

  • 優點
    • 減少 Server 端的壓力
      因為 JavaScript 及 CSS 在第一次都已經發送到 Client 端,之後只需要向 Server 端取得相關頁面的 data 即可。
    • 頁面切換速度快
      因為 HTML 頁面都是 Client 端自己編譯的,所以頁面切換時不需要像 SSR 等待 Server 端回傳 HTML;而且網頁內容的改變通常都是局部的,這樣就避免了不必要的跳轉及重複渲染。
  • 缺點
    • 首屏顯示慢
      明明首頁只有一點內容卻下載了所有頁面的資源。
    • SEO 較差
      因爲一開始的 HTML 頁面是空白的;儘管現在 Google 的爬蟲也會等 JavaScript 編譯好再爬,但這塊對 SEO 的實際幫助還需要時間驗證。
  • 應用場景
    • 會高頻操作且不需 SEO 的網站
      像是內部管理系統(ERP 系統、訂單管理系統),如果這類型的系統採取 SSR 會造成 Server 端較大的負荷。

2.2 SSR - Server-Side Rendering(伺服器端渲染)

HTML 由 Server 端編譯出來返回 Client 端,所以 Client 看到的畫面就是最終版 HTML。

  • 優點
    • SEO 排名更高
      因為 Google 爬蟲可以直接抓到網站的資訊。
    • 首屏渲染快
      因為不需要下載一堆 JavaScript 及 CSS ,還要等待它們編譯後才看到頁面。
    • 減少 Client 端的耗電量
      因為編譯的步驟都在 Server 端執行。
  • 缺點
    • Server 端承受比較大的壓力
      由於頁面都是在 Server 端進行編譯,在高併發場景中會消耗相當大的資源。
  • 應用場景
    • 低頻操作但需要 SEO 優化的網站
      像是媒體類型的網站(部落格、新聞網站、技術文件),因為文章要被搜尋到才會有流量及話題,而且大部分的時候 Client 端都在閱讀,很少有高頻操作的情境。

3. 衍伸問題

3.1 在實務上有遇過什麼問題?你如何解決?

考點:了解你在實務上是否能靈活運用

  • 先簡述自己遇過的問題
    假設 Client 端的網路環境不理想又採用 CSR,那在首屏渲染的過程可能就趕走許多使用者;在這種情況下 SSR 會因為 Server 環境相對穩定而獲得較好的使用者體驗。

  • 再說明解決方式
    無論是 CSR 還是 SSR 都有各自的優勢與弱點,所以我通常會讓第一個頁面用 SSR 來爭取更高的 SEO,其他操作頻率高的頁面則採用 CSR 讓使用者有良好的體驗;目前 Nuxt.js(Vue)、Next.js(React)這兩個框架都是很好的解決方案


感謝大家的閱讀,如果喜歡我的文章可以訂閱接收通知;如果有幫助到你,按Like可以讓我更有寫文的動力,我們明天見~

參考資源

  1. SSR、CSR 名詞理解 & 應用場景(筆者部落格)

我在 Medium 平台 也分享了許多技術文章
❝ 主題涵蓋「MIS & DEVOPS資料庫前端後端MICROSFT 365GOOGLE 雲端應用自我修煉」希望可以幫助遇到相同問題、想自我成長的人。❞


https://ithelp.ithome.com.tw/upload/images/20230512/20103256twZPv1G4XH.jpg

在許多人的幫助下,本系列文章已成功出版,除了添加新的篇章,更完善了每個案例的應對進退;如果對現在的職涯感到迷茫,也許這本書能帶給你不一樣的觀點~

天瓏書局: https://www.tenlong.com.tw/products/9786263334571


上一篇
[面試][前端]請說明你現在專案用到的前端框架
下一篇
[面試][前端]在使用後端的資料前,你有先做驗證嗎?
系列文
全端工程師生存筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言